<template>
  <div id="driverCompany_box">
    <div class="driverCompanySerch">
      <p>
        <input placeholder="输入出租车公司名称" v-on:input="searchCompany" v-model="companyValue" />
      </p>
    </div>
    <div class="driverCompany_list" v-show="iSserch">
      <ul>
        <li v-for="(item, index) in serchData" :key="index" @click="getprovince(item.firmName,item.firmId)">{{item.firmName}}</li>
      </ul>
    </div>
    <div class="driverCompany_list" v-show="IsdriverCompany">
      <div v-for="(item, index) in data" :key="index">
        <p>{{item.Letter}}</p>
        <ul>
          <li v-for="(itemcompany, index) in item.items" :key="index" @click="getprovince(itemcompany.firmName,itemcompany.firmId)">{{itemcompany.firmName}}</li>
        </ul>
      </div>
      <div class="letter_box">
        <h6 v-for="(item, index) in data" :key="index">{{item.Letter}}</h6>
      </div>
    </div>
    <div class="driverCompany_no" v-show="IsdriverCompanyNo">
      <p>没有数据</p>
    </div>
  </div>
</template>
<script>
import { Icon, Field, FieldItem, Toast, Dialog, Picker } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [FieldItem.name]: FieldItem,
    letterData: []
  },
  data() {
    return {
      title: '选择出租车公司',
      data: [],
      serchData: [],
      iSserch: false,
      IsdriverCompany: true,
      IsdriverCompanyNo: false,
      companyValue: ''
    };
  },
  mounted() {
    let params = {
      province: sessionStorage['province'],
      city: sessionStorage['city'],
      country: sessionStorage['county']
    };
    Loading.show();
    http.post('/pakj/txDriver/getTxFirmInfo', params).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        console.log(res.data);
        if (res.data.data.length === 0) {
          sessionStorage.clear('driverCompanyName');
          sessionStorage.clear('driverCompanyFirmId');
          this.IsdriverCompany = false;
          this.IsdriverCompanyNo = true;
        }
        var cityArray = [];
        var cityDic = {};
        for (var index in res.data.data) {
          var value = res.data.data[index];
          var firmName = value.firmName;
          var firmId = value.firmId;
          var p = pinyinUtil.getFirstLetter(name.substr(0, 1));
          var city = {
            firmName: firmName,
            tags: firmName + p,
            firmId: firmId
          };
          if (cityDic[p]) {
            cityDic[p].push(city);
          } else {
            cityDic[p] = [city];
          }
        }
        for (var k in cityDic) {
          var cities = cityDic[k];
          cityArray.push({
            Letter: k,
            items: cities,
            number: k.charCodeAt()
          });
        }
        cityArray.sort(function(a, b) {
          return a.number - b.number;
        });
        this.data = cityArray;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 选择出租车公司
    getprovince(name, firmId) {
      sessionStorage['driverCompanyName'] = name;
      sessionStorage['driverCompanyFirmId'] = firmId;
      this.$router.push({
        name: 'driverCompany',
        query: {
          driverId: this.$route.query.driverId,
          driverphone: this.$route.query.driverphone
        }
      });
    },
    // 搜索公司名字
    searchCompany() {
      var tab = this.data;
      this.serchData = [];
      if (this.companyValue) {
        this.IsdriverCompany = false;
        this.iSserch = true;
        for (var j in tab) {
          if (tab[j].firmName.indexOf(this.companyValue) >= 0) {
            this.serchData.push(tab[j]);
          }
        }
      } else {
        this.IsdriverCompany = true;
        this.iSserch = false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#driverCompany_box {
  .driverCompanySerch {
    background-color: #2A2A33;
    height: 110px;
  }

  .driverCompanySerch p {
    padding: 18px 30px 0px 30px;
  }

  .driverCompanySerch p input {
    width: 98%;
    height: 70px;
    border: none;
    border-radius: 7px;
    outline: none;
    padding-left: 2%;
  }

  .driverCompany_list {
    position: relative;
  }

  .driverCompany_list ul li {
    height: 88px;
    line-height: 88px;
    font-size: 28px;
    color: #333;
    padding: 0px 30px;
    border-bottom: solid 1px #EFEFEF;
    width: 600px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .driverCompany_list p {
    height: 80px;
    background-color: #EFEFEF;
    line-height: 80px;
    font-size: 28px;
    color: #333;
    padding-left: 30px;
  }

  .driverCompany_no p {
    text-align: center;
    font-size: 28px;
    color: #666;
    margin-top: 300px;
  }

  .letter_box {
    position: fixed;
    right: 30px;
    top: 260px;
  }

  .letter_box h6 {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    height: 60px;
    width: 50px;
    line-height: 60px;
    text-align: center;
  }
}
</style>
